import { FloatingBubble } from "antd-mobile";
import { AppstoreOutline } from "antd-mobile-icons";
import styles from "./FloatingBubbleDemo.module.scss";
import { useContext, useState } from "react";
import { GlobalContext, demoList } from "../GlobalContext";

export default () => {
  const [isShowList, setShowList] = useState(false);
  const { componentName, setComponentName } = useContext(GlobalContext);

  return (
    <div className={styles.FloatingBubbleDemo}>
      <FloatingBubble
        style={{
          "--initial-position-bottom": "24px",
          "--initial-position-right": "24px",
          "--edge-distance": "24px",
        }}
        onClick={() => setShowList(!isShowList)}
      >
        {isShowList && (
          <div className={styles.demoList}>
            {demoList.map((item, index) => (
              <span
                key={index}
                className={`${styles.demoItem} ${componentName===item ? styles.active: '' }`}
                onClick={() => setComponentName(item) }
              >
                {item}
              </span>
            ))}
          </div>
        )}
        <AppstoreOutline fontSize={32} />
      </FloatingBubble>
    </div>
  );
};
